<template>
  <div class="member-wrapper">
    <common-title-bar v-show="platform != 2" style="color: #fff; fill: #fff" :mode="'white'" :always="isAlways" :isShowMoreOption="platform != 2"></common-title-bar>
    <div class="member-swiper">
      <div class="member-bg">
        <div class="member-bg-line"></div>
        <div class="member-bg-line line2"></div>
      </div>
      <div class="swiper-wrapper-wrapper" :style="{marginTop: platform == 2 ? '1.8rem' : ''}" ref="memberSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :ref="'swiper-slide-'+index" :key="index" v-for="(n, index) in levelList" :style="index === 1 ? swiperStyle : ''">
            <div class="swiper-item-wrapper">
              <div class="member-level" @click="() => {goToDesc()}" :style="{background: `url(${n.background}) 0/100% no-repeat`}">
                <div class="user-info">
                  <div class="user-photo">
                    <skeleton avatar :avatar-size="'0.74rem'" :loading="skeletonLoading">
                      <img :src="userInfo.userHeader" alt="">
                    </skeleton>
                  </div>
                  
                    <div class="user-level">
                      <skeleton title :row="1" :round="true" :loading="skeletonLoading">
                        <div class="user-level-name">
                          <span class="name">{{n.level_name}}</span><span>({{n.levelStatus}})</span>
                        </div>
                        <div class="level-cost">{{n.levelRange}}</div>
                        <div class="level-process-wrap" v-if="n.amountPercent !== '100%'">
                          <div :style="{'width': n.amountPercent}" class="level-process"></div>
                          <div :style="{'left': n.amountPercent}" class="level-process-dot"></div>
                        </div>
                      </skeleton>
                    </div>
                </div>
                <div class="member-discount" :style="{color: n.discountColor, background: `url(${n.discountBackground}) 0/100% no-repeat`}">
                  <p v-if="!skeletonLoading">{{n.discount}}折</p>
                </div>
                <div class="logo"></div>
                <div class="member-tip">如何升级/降级保级</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-title">
      <p>{{currentLevelName}}特权</p>
    </div>
    <div class="benefit-list">
      <div class="benefit-item" v-for="n in currentBenefit" :key="n.id">
        <div class="benefit-icon">
          <img v-if="n.rights_img" :src="n.rights_img" alt="">
        </div>
        <div class="benefit-info">
          <p class="benefit-title">{{n.rights_name}}</p>
          <p class="benefit-desc">{{n.rights_explain}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getMemberBenefits} from '@/api/request'
import { mapState } from "vuex";
import CommonTitleBar from '@/components/CommonTitleBar'
import { Skeleton } from 'vant'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  data() {
    return {
      memberSwiper: null,
      skeletonLoading: true,
      levelList: [
        {
          level: 1,
          level_name: '-',
          discount: 9.5,
          discountColor: '#7B6947',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_1.png'),
          discountBackground: require('../../assets/images/level_discount_1.png')
        }, {
          level: 2,
          level_name: '-',
          discount: 9.5,
          discountColor: '#3C714F',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_2.png'),
          discountBackground: require('../../assets/images/level_discount_2.png')
        }, {
          level: 3,
          level_name: '-',
          discount: 9.5,
          discountColor: '#3B566C',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_3.png'),
          discountBackground: require('../../assets/images/level_discount_3.png')
        }, {
          level: 4,
          level_name: '-',
          discount: 9.5,
          discountColor: '#533868',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_4.png'),
          discountBackground: require('../../assets/images/level_discount_4.png')
        }, {
          level: 5,
          level_name: '-',
          discount: 9.5,
          discountColor: '#A74051',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_5.png'),
          discountBackground: require('../../assets/images/level_discount_5.png')
        }, {
          level: 6,
          level_name: '-',
          discount: 9.5,
          discountColor: '#1A1A1A',
          levelRange: '-',
          levelStatus: '-',
          background: require('../../assets/images/level_6.png'),
          discountBackground: require('../../assets/images/level_discount_6.png')
        }, 
      ],
      swiperStyle: "",
      userInfo: {},
      currentLevel: 0,
      currentBenefit: [],
      currentLevelName: ''
    };
  },
  components: {
    Skeleton, CommonTitleBar
  },
  computed: {
    ...mapState({
      isAlways: "isAlways",
      platform: "platform"
    })
  },
  mounted () {
    this.memberSwiperInit()
    this.getMemberBenefits()
  },
  methods: {
    goToDesc () {
      if (this.memberSwiper.activeIndex !== this.memberSwiper.clickedIndex) {return}
      if (window.WebViewJavascriptBridge) {
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goSignInSuccess', {
          url: process.env.HTML_BASE_URL + `levelDesc?token=${this.$store.state.token}`
        })
      } else {
        this.$router.push({path: '/levelDesc'})
      }
      
    },
    getMemberBenefits () {
      getMemberBenefits({
        unionKey: this.$store.state.unionKey,
        requestFrom: this.platform == 2 ? '' : 'userCenter'
      }).then(res => {
        console.log(res)
        if (res.levelInfo.length) {
          res.levelInfo.forEach((val, i) => {
            this.levelList[i] = Object.assign(this.levelList[i], val)
            if (val.isCurrentLevel) {
              this.currentLevel = i
            }
          })
        }
        this.userInfo = res.user
        this.skeletonLoading = false
        this.memberSwiper.slideTo(this.currentLevel, 1000)
        this.currentBenefit = this.levelList[this.currentLevel].rightList
        this.currentLevelName = this.levelList[this.currentLevel].level_name
      }).catch(e => {
        console.log(e)
      })
    },
    memberSwiperInit () {
      this.memberSwiper = new Swiper(this.$refs.memberSwiper, {
        initialSlide: 0,
        slidesPerView: 'auto',
        centeredSlides: true,
        autoplay: false,
        loop: false,
        observer: true,
        observeParents: true,
        on: {
          slideChangeTransitionEnd: () => {
            this.currentLevelName = this.levelList[this.memberSwiper.activeIndex].level_name
            this.currentBenefit = this.levelList[this.memberSwiper.activeIndex].rightList
          },
          click: () => {
            setTimeout(() => {
              if (this.memberSwiper.clickedIndex >= 0) {
                this.memberSwiper.slideTo(this.memberSwiper.clickedIndex)
              }
            }, 300);
          }
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.member-wrapper {
  background: #F5F5F5;
  min-height: 100vh;
  animation: course-out 0.4s linear;
  display: flex;
  flex-direction: column;
  p{
      margin: 0;
      padding: 0;
  }
  .member-swiper{
    overflow: hidden;
    position: relative;

    .member-bg{
      position: absolute;
      width: 100%;
      height: 4.24rem;
      background: linear-gradient(313deg, #404040 0%, #717171 100%);
      opacity: 1;
      border-radius: 0rem 0rem 1rem 1rem;
      overflow: hidden;

      .member-bg-line{
        position: absolute;
        top: -1rem;
        bottom: -1rem;
        left: 3.5rem;
        width: 0.8rem;
        background: #FFFFFF;
        opacity: 0.05;
        transform: rotate(30deg)
      }
      .line2{
        left: 4.8rem;
        width: 0.5rem;
      }
    }

    .swiper-wrapper-wrapper {
      margin-top: 2.11rem;

      .swiper-slide {
        width: 6.4rem !important;
        height: 3.08rem;
        overflow: hidden;
        position: relative;
        // margin: 0 0.55rem;
        transition: 0.8s;
        transition-delay: 0.1s;
        will-change: transform;

        .swiper-item-img-wrapper {
          display: inline-block;
          padding: 0;
          margin: 0;
          line-height: 0;
          position: relative;

        }
        .swiper-item-wrapper, .member-level{
          width: 100%;
          height: 100%;
        }
        .member-level{
          border-radius: 0.1rem;
          overflow: hidden;

          .user-info{
            display: flex;
            justify-content: start;
            align-items: center;
            margin-top: 0.44rem;
            margin-left: 0.28rem;

            .user-photo{
              width: 0.81rem;
              height: 0.91rem;
              background: url(../../assets/images/memberPhotoBg.png) no-repeat;
              background-size: contain;
              flex-shrink: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              .van-skeleton{
                width: 0.74rem;
                height: 0.74rem;
                padding: 0;
                
              }
              img{
                width: 0.74rem;
                height: 0.74rem;
                display: block;
                object-fit: contain;
                border-radius: 0.37rem;
                overflow: hidden;
              }
            }
            .user-level{
              margin-left: 0.1rem;
              min-width: 4rem;

              .van-skeleton{
                padding: 0 0.1rem;

                .van-skeleton__title+.van-skeleton__row{
                  margin-top: 0.1rem;
                }
              }
              .user-level-name{
                display: flex;
                align-items: flex-end;
                color: #fff;
                font-size: 0.24rem;
                .name{
                  margin-right: 0.2rem;
                  font-size: 0.3rem;
                }
              }

              .level-cost{
                font-size: 0.24rem;
                color: #fff;
                margin-top: 0.1rem;
              }
              .level-process-wrap{
                position: relative;
                width: 2rem;
                height: 0.05rem;
                background: rgba(0, 0, 0, 0.3);
                border-radius: 0.025rem;
                margin-top: 0.15rem;
                
                .level-process{
                  position: absolute;
                  left: 0;
                  height: 100%;
                  background: #fff;
                  border-radius: 0.025rem;
                  transition: 0.3s;
                }
                .level-process-dot{
                  position: absolute;
                  top: 50%;
                  left: 0;
                  width: 0.13rem;
                  height: 0.13rem;
                  background: #FFFFFF;
                  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
                  border-radius: 50%;
                  opacity: 1;
                  transform: translate(-50%, -0.06rem);
                  transition: 0.3s;
                }
              }
            }
          }
          .member-discount{
            position: absolute;
            top: 0.53rem;
            right: 0.27rem;
            width: 1.22rem;
            height: 0.58rem;
            font-size: 0.3rem;
            text-align: center;
            line-height: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.3rem;
            overflow: hidden;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.16);
          }
          .logo{
            position: absolute;
            bottom: 0.4rem;
            right: 0.36rem;
            width: 1.08rem;
            height: 0.32rem;
            background: url(../../assets/images/logo.png) no-repeat;
            background-size: contain;
          }
          .member-tip{
            position: absolute;
            bottom: 0.43rem;
            left: 0.36rem;
            padding-left: 0.32rem;
            background: url(../../assets/images/memberTip.png) no-repeat;
            background-size: 0.24rem 0.24rem;
            background-position: left center;
            font-size: 0.24rem;
            font-weight: 400;
            line-height: 1;
            color: rgba(255, 255, 255, 0.5);
          }
        }
        // &:last-child {
        //   left: -0.5rem;
        // }
      }
      .swiper-slide-next {
        transform: scale(0.8) translateX(-0.4rem);
        transform-origin: center;
        // left -1.5rem;
        // transition: left 1s;
      }
      .swiper-slide-prev{
        transform: scale(0.8) translateX(0.4rem);
        transform-origin: center;
        // right:  -1.5rem;
        // transition: right: 1s;
      }
      // .swiper-slide-active{
      //   transform: scale(1)!important;
      // }
    }
  }
  .middle-title{
    position: relative;
    margin: 0.37rem 1.17rem;
    font-size: 0.3rem;
    text-align: center;
    font-weight: blod;
    
    p{
      display: inline-block;
      padding-left: 0.48rem;
      background: url(../../assets/images/vip.png) no-repeat;
      background-size: 0.31rem 0.33rem;
      background-position: left center;
    }
  }
  .middle-title::before{
    content: '';
    position: absolute;
    left: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 0.01rem;
    background: #a4a4a4;
  }
  .middle-title::after{
    content: '';
    position: absolute;
    right:  -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 0.01rem;
    background: #a4a4a4;
  }
  .benefit-list{
    flex: 1;
    width: 5.8rem;
    min-height: 3rem;
    padding: 0.3rem;
    background: #fff;
    border-radius: 0.1rem 0.1rem 0 0;
    margin: 0 auto;
    transition: height 2s;

    .benefit-item{
      display: flex;
      margin-bottom: 0.3rem;

      .benefit-icon{
        width: 0.5rem;
        height: 0.5rem;
        flex-shrink: 0;
        margin-right: 0.3rem;

        img{
          width: 100%;
          height: 100%;
          display: block;
          object-fit: contain;
        }
      }

      .benefit-title{
        font-size: 0.28rem;
        color: #383838;
        margin-top: 0.07rem;
      }
      .benefit-desc{
        font-size: 0.24rem;
        color: #999999;
        margin-top: 0.15rem;
        line-height: 0.36rem;
      }
    }
  }
}
</style>
